$(() => {
  const { form } = layui
  // 拿=索引号
  const index = location.href.indexOf('=')
  
  let id
  let state
  let $image
  // 定义渲染文章分类的函数
  function initCate () {
    $.ajax({
      type: "get",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status != 0) return layer.msg('获取文章分类失败!');
        const html = template('tpl-cate', res)
        $('[name=cate_id]').html(html)
        form.render(); //更新全部
        // 如果找不到=, 说明不是从编辑按钮过来的
        if (index !== -1) {
          // alert(123)
          id = location.href.substring(index + 1)
          // 根据Id发请求, 拿到文章数据, 再回显
          $.ajax({
            type: "get",
            url: "/my/article/" + id,
            success: function (res) {
              if (res.status != 0) return layer.msg('获取文章失败!');
              // 把res的数据渲染到表单内
              // 文章的分类, 肯定是先拿到后台给的分类, 然后才能根据Id回显
              form.val('form-pub', res.data)
              // 初始化富文本编辑器
              initEditor()
              // 对文章的封面进行回显 
              // 修改#image的src
              $('#image').attr('src', 'http://big-event-api-t.itheima.net' + res.data.cover_img)
              // 重新初始化图片
              initImg()
              // 修改编辑中的stata
              state = res.data.state
            }
          });
        } else {
          // 走的是发布流程
          state = "已发布"
          // 初始化富文本编辑器
          initEditor()
          initImg()
        }
      }
    });
  }

  initCate()
  // 初始化图片裁剪区域
  function initImg () {
    // 1. 初始化图片裁剪器
    $image = $('#image')

    // 2. 裁剪选项
    var options = {
      aspectRatio: 400 / 280,
      preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)
  }


  // 给选择封面注册点击事件
  $('#btnChooseImage').on('click', function () {
    $('#coverFile').click()
  });

  // 文件上传的事件  change  Input框内的内容改变触发
  $('#coverFile').on('change', function (e) {
    // 拿到上传的文件列表
    // $('#file')[0].files
    // $(this)[0].files
    // e.target.files
    const fileList = $(this)[0].files  // 伪数组,索引0保存的就是上传的文件
    // 判断有没有上传文件
    if (fileList.length == 0) return layer.msg('没有上传文件')
    // 从文件列表拿文件
    const file = fileList[0]
    // 创建图片地址
    const imgUrl = URL.createObjectURL(file)
    // 渲染到页面(使用插件渲染)
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', imgUrl)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })

  //注册表单的提交事件  发布和存为草稿都触发提交事件
  // 思考: 怎么区分2个按钮的state参数?
  // 通过按钮的click事件, 给state设置不同的值

  // // 发布注册一个事件
  // $('#btnAdd').on('click', function () {
  //   state = "已发布"
  // });
  // 草稿注册一个事件
  $('#btnSave').on('click', function () {
    state = "草稿"
  });
  // 发布按钮事件
  $('#form-pub').on('submit', function (e) {
    // e.target拿不到点击的按钮, 拿的是form表单
    e.preventDefault();
    // 创建一个FormData()
    // const fd = new FormData()

    // 课程里的
    // const fd = new FormData($(this)[0])
    // fd.append('state', state)
    // 快速拿到表单数据
    // const data = $(this).serialize() // data是字符串
    $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 自己通过循环加入的数据
        const fd = new FormData()
        // form.val() 快速拿到表单数据
        const data = form.val('form-pub') //data拿到的是对象
        // data添加state状态
        data.state = state
        // data添加cover_img
        data.cover_img = blob
        // 循环data, 给fd对象添加参数
        for (let key in data) {
          fd.append(key, data[key])
        }
        if (index !== -1) {
          fd.append('Id', id)
          // 编辑状态
          // 编辑的ajax
          $.ajax({
            type: "post",
            url: "/my/article/edit",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
              if (res.status != 0) return layer.msg('修改文章失败!');
              layer.msg('修改文章成功', {
                icon: 1,
                time: 500 //2秒关闭（如果不配置，默认是3秒）
              }, function () {
                history.go(-1)
              });
            }
          });
        } else {
          // 发布的ajax
          $.ajax({
            type: "post",
            url: "/my/article/add",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
              if (res.status != 0) return layer.msg('发布文章失败!');
              // 跳转页面
              location.href = '/article/art_list.html'
            }
          });
        }


      })
  })
})